<template>
  <div class="problem">
    <div class="top">
      <img
        src="../../assets/images/problem1.png"
        alt=""
        class="top-img1"
        @click="goback"
      />
      <p class="top-p">{{ $t("common.bangzhuzhongxin") }}</p>
      <!-- <img src="../../assets/images/problem2.png" alt="" class="top-img2"> -->
    </div>
    <van-tabs v-model="active">
      <van-tab :title="$t('long.gonggao')">
        <div class="bottom gonggao">
          <div
            class="content"
            @click="goInform(index, titles.url)"
            v-for="(titles, index) in title1"
            :key="titles.id"
          >
            <div>
              <p>{{ titles.title }}</p>
              <p class="ggtime">{{ titles.createTime }}</p>
            </div>
            <img src="../../assets/images/connent1.png" alt="" />
          </div>
        </div>
      </van-tab>
      <van-tab title="API">
        <div class="bottom gonggao">
          <iframe
            style="background-color: transparent"
            width="100%"
            height="4000"
            src="https://www.ruppleexchange.com/api/document.html"
            frameborder="0"
          ></iframe>
        </div>
      </van-tab>
      <van-tab :title="$t('long.bangzhu')">
        <div class="center">
          <p>{{ $t("common.niyouyiwenma") }}</p>
          <img src="../../assets/images/problemlogo.png" alt="" />
        </div>
        <div class="bottom">
          <div class="title">
            <p class="p1">{{ $t("common.remenwenti") }}</p>
            <p class="p2">
              <span>{{ title.length }}</span>
              <img src="../../assets/images/problem3.png" alt="" />
            </p>
          </div>
          <div
            class="content"
            v-for="(titles, index) in title"
            :key="titles.id"
          >
            <p @click="goProblemOne(index)">{{ titles.title }}</p>
          </div>
          <!-- <div class="content">
                        <p @click="goProblemTwo">2.在对方平台提币后，就能立即到账吗？</p>
                    </div>
                    <div class="content">
                        <p @click="goProblemThree">3.如何进行合约交易</p>
                    </div>
                    <div class="content">
                        <p @click="goProblemFour">4.合约交易如何设置止盈止损</p>
                    </div> -->
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: [],
      title1: [],
      active: 0,
    };
  },
  watch: {
    active: {
      handler(val) {
        if (val == 1) {
          document.getElementById("app").style.background = "transparent";
          document.querySelector(".van-tabs__wrap").style.background =
            "#090A1B";
        } else {
          document.getElementById("app").style.background = "#090A1B";
        }
      },
      immediate: true,
    },
  },
  deactivated() {
    document.getElementById("app").style.background = "#090A1B";
  },
  async activated() {
    this.active = localStorage.getItem("zh") - 0;
    localStorage.setItem("zh", 0);
    if (this.active == 1) {
      document.getElementById("app").style.background = "transparent";
      document.querySelector(".van-tabs__wrap").style.background = "#090A1B";
    } else {
      document.getElementById("app").style.background = "#090A1B";
    }
    // if(this.$route.query.active == 1){
    //     this.active = 1
    // }else{
    //     this.active = 0
    // }
    const ret = await this.$http({
      url: "/system/articleManagement/getArticleManagement",
      method: "post",
      data: {
        articleTypeCode: "1563385493535264458",
      },
    });
    if (ret.data.code === 0) {
      this.title = ret.data.data;
    }
    const ret1 = await this.$http({
      url: "/system/articleManagement/getArticleManagement",
      method: "post",
      data: {
        articleTypeCode: "1563385493535264457",
      },
    });
    if (ret1.data.code === 0) {
      this.title1 = ret1.data.data;
    }
  },
  async created() {},
  methods: {
    goback() {
      // this.$router.push('/options')
      this.$router.go("-1");
    },
    goProblemOne(ind) {
      localStorage.setItem("zh", 1);
      this.$router.push({
        path: "/problemone",
        query: {
          id: ind,
        },
      });
    },
    goInform(ind, val) {
      if (val) {
        window.location.href = val + "?id=" + ind;
        return;
      }
      this.$router.push({
        path: "/inform",
        query: {
          id: ind,
        },
      });
    },
    //获取字符位置
    find(str, cha, num) {
      var x = str.indexOf(cha);
      for (var i = 0; i < num; i++) {
        x = str.indexOf(cha, x + 1);
      }
      return x;
    },
    // goProblemTwo(){
    //     this.$router.push('/problemtwo')
    // },
    // goProblemThree(){
    //     this.$router.push('/problemthree')
    // },
    // goProblemFour(){
    //     this.$router.push('/problemfour')
    // },
  },
};
</script>

<style scoped lang="scss">
.problem {
  margin: 0;
  padding: 0;
  .top {
    height: 11.73vw;
    width: 100vw;
    background-color: #090A1B;
    display: flex;
    align-items: center;
    //font-family: Microsoft Yahei;
    .top-img1 {
      height: 5.3vw;
      width: 5.3vw;
      left: 2.4vw;
      position: absolute;
    }
    .top-p {
      font-size: 4.8vw;
      color: rgba(255, 255, 255, 100);
      letter-spacing: 0.2vw;
      margin: 0 auto;
    }
    // .top-img2{
    //     height: 5.3vw;
    //     width: 5.3vw;
    //     margin-right: 3.2vw;
    // }
  }
  .center {
    height: 33.6vw;
    width: 91.46vw;
    margin: 0 auto;
    text-align: left;
    border-bottom: 1px solid rgba(45, 47, 59, 100);
    font-family: PingFangSC-regular;
    img {
      position: relative;
      left: 58.13vw;
      width: 30.13vw;
      height: 30.13vw;
      top: 2vw;
    }
    p {
      position: absolute;
      line-height: 6vw;
      width: 48vw;
      top: 24.53vw;
      font-size: 3.73vw;
      letter-spacing: 0.1vw;
    }
  }
  .bottom {
    height: 60vw;
    .title {
      height: 16.26vw;
      width: 91.46vw;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .p1 {
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        font-family: PingFangSC-regular;
        letter-spacing: 0.1vw;
      }
      .p2 {
        display: flex;
        align-items: center;
        span {
          color: rgba(187, 187, 187, 100);
          font-size: 3.73vw;
          font-family: PingFangSC-regular;
          position: relative;
          right: 2.93vw;
        }
        img {
          width: 4.8vw;
          height: 4.8vw;
        }
      }
    }
    .content {
      height: 13.93vw;
      width: 91.46vw;
      margin: 0 auto;
      line-height: 5vw;
      display: flex;
      align-items: center;
      p {
        width: 91.46vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.2vw;
        text-align: left;
        letter-spacing: 0.2vw;
      }
    }
  }
  .gonggao {
    // padding-top: 6vw;
    .content {
      height: auto;
      width: 91.46vw;
      margin: 5vw auto;
      line-height: 5vw;
      // align-items: flex-start;
      justify-content: space-between;
      p {
        width: 60vw;
      }
      .ggtime {
        color: #8992AE;
      }
      img {
        width: 3.2vw;
        margin-top: 1vw;
      }
    }
  }
  :deep(.van-tabs__nav) {
    background-color: transparent;
    .van-tab {
      color: #fff;
    }
    .van-tabs__line {
      background-color: #0a7aff;
    }
  }
}
</style>
